<template>

    <div class="tabbar-item" @click="itemclick">
        <div v-if="!isActive">
            <slot name="item-icon"></slot>
        </div>
        <div v-else>
            <slot name="item-icona"></slot>
        </div>
        <div :style="{color:isActive?activeColor:''}">
            <slot name="item-text"></slot>
        </div>
        
        
       </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props:{
        path:String,
        activeColor:{
            type:String,
            default:'red'
        }
    },
    computed: {
        isActive(){
            //判断当前路径，如果包含父组件传过来的路径，便将这个tabbar-item的isActive设置为true
            return this.$route.path.indexOf(this.path)!=-1
        }
    },
    methods: {
        itemclick(){
            console.log('item click')
            //点击路由跳转
            this.$router.replace(this.path)
        }
    },
}
</script>

<style scoped lang="scss">
       
            .tabbar-item{
            flex: 1;
            height: 49px;
            text-align: center;
            font-size: 14px;
            img{
                width: 20px;
                height: 20px;
                display: block;
                margin: 0 auto;
                margin-top: 5px;
            }
        }
        
</style>
   